<template>
  <div
    class="absolute left-0 top-0 z-1 wh-full overflow-hidden bg-#fafafa dark:bg-#333"
  >
    <div class="absolute -right-300 -top-900 <sm:(-right-100 -top-1170)">
      <corner-top :startColor="endColor" :endColor="startColor" />
    </div>
    <div class="absolute -left-200 -bottom-400 <sm:(-left-100 -bottom-760)">
      <corner-bottom :startColor="startColor" :endColor="endColor" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { CornerBottom, CornerTop } from "./components";
import { useAppStore } from "@/store";

const appStore = useAppStore();
const startColor = computed(() => (appStore.isDark ? "#28aff077" : "#28aff0"));
const endColor = computed(() => (appStore.isDark ? "#120fc477" : "#120fc4"));
</script>
